<template>
    <div id="moudule" onselectstart="return false" :class="{cursorOne:followShow == 1,cursorTwo:followShow == 2,cursorThree:followShow == 3,cursorFour:followShow == 4,cursorFive:followShow == 5,cursorSix:followShow == 6,cursorSeven:followShow == 7,cursorEight:followShow == 8,cursorNine:followShow == 9,cursorTen:followShow == 10}">
        <div class="moduleTop">
            审批表单设计
        </div>
        <div class='designer' @mouseup="designerUp($event)">
            <v-Left></v-Left>
            <v-Content :moverShow="moveShows"></v-Content>
            <v-Right></v-Right>
        </div>
        <div class="submitBut" @click="submitClick()">
            保存
        </div>
        <div class="boxBackground" v-show='boxShow'>
            <div class="addBox">
                <div class="addBoxTop">
                    <div class="addBoxTopFont">保存模板</div>
                    <div class="addBoxTopBut" @click="cancelBoxClick()">
                        +
                    </div>
                </div>
                <div class="boxSelect">
                    <div class="boxSelectFont">
                        模板保存至：
                    </div>
                    <div class="boxSelectSelect">
                        <select v-model="categoryId">
                            <option v-for="(type,index) in boxList" v-bind:value="type.id" :key="type.id">{{type.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="boxButton">
                    <div class="addBut" @click='addBoxClick()'>
                        确定
                    </div>
                    <div class="cancelBut" @click="cancelBoxClick()">
                        取消
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Left from './left.vue'
    import Content from './content.vue'
    import Right from './right.vue'
    import { mapActions } from "vuex";
    export default {
        components: {
            'v-Left': Left,
            'v-Content': Content,
            'v-Right': Right,
        },
        data() {
            return {
                moveShows: 'true',  //组件选择传值
                followShow: 0,   //鼠标跟随显示
                fromNameVal: '',//审批名称
                fromExplainVal: '',//审批说明
                list: [],   //表单
                iconVal: '', //图标 
                boxList: [], //审批组
                boxShow: false, //保存选择分组
                categoryId: 'QXZ',//分组id
            };
        },
        //过滤
        filters: {},
        // 计算属性
        mounted() {
            moudule.oncontextmenu = function (e) {
                return false;
            }
        },
        created: function () {
            var self = this
            drag.$on('leftDown', function (val) {//左边鼠标按下
                self.followShow = val
            })
            drag.$on("deitListFun", function (arr) { //表单发生变化
                self.list = arr
            })
            drag.$on('editNameFun', function (val) {//审批名称
                self.fromNameVal = val
            })
            drag.$on('editExplainFun', function (val) {//审批说明
                self.fromExplainVal = val
            })
            drag.$on('contentMoveFun', function (val) { //组件拖动
                self.followShow = val
            })
            drag.$on('contentUpFun', function () {
                self.followShow = 0
            })
            drag.$on('iconClickFun', function (val) {
                self.iconVal = val
            })
            self.getapprovalcategorylist({
                companyId: sessionStorage.getItem("ORGID")
            }).then(data => {
                if (data.statusCode == 200) {
                    self.boxList = data.data;
                    self.boxList.unshift({
                        name: "请选择",
                        id: "QXZ"
                    });
                } else {
                    self.$message(data.statusMessage);
                }
            }).catch(msg => {
                self.$message("服务器异常");
            });
            if (self.$route.query.upData == 'add') {
                self.categoryId = 'QXZ'
            } else if (self.$route.query.upData == 'edit') {
                let obj = JSON.parse(self.$route.query.upList)
                self.categoryId = obj.templateGroupId
                self.fromNameVal = obj.name//审批名称
                self.fromExplainVal = obj.introduce //审批说明
                self.iconVal = obj.logo //审批说明
            }
        },
        methods: {
            //鼠标松开
            designerUp(e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                this.followShow = 0
                drag.$emit('designerUpFun', false)
            },
            //保存
            submitClick() {
                var self = this
                let listArr = self.list
                if (listArr.length > 0) {
                    for (let i = 0; i < listArr.length; i++) {
                        if (listArr[i].dataType == 7) {
                            if (listArr[i].child.length == 0) {
                                self.$message('请添加控件到明细中')
                                return
                            }
                        }
                    }
                } else {
                    self.$message('请创建您的表单')
                    return
                }
                if (self.fromNameVal == '') {
                    self.$message('请填写审批名称')
                    return
                }
                if (self.iconVal == '') {
                    self.$message('请选择审批图标')
                    return
                }
                self.boxShow = true

            },
            //确定
            addBoxClick() {
                var self = this
                if (self.categoryId == "QXZ") {
                    self.$message("请选择分组");
                    return;
                }
                let listArr = self.list
                let listCopyArr = []
                listArr.forEach(ele => {
                    if (ele.dataType == 7) {
                        listCopyArr.push({
                            dataType: ele.dataType,
                            formLabel: ele.formLabel,
                            child: ele.child,
                            children: [],
                        })
                    } else {
                        listCopyArr.push({
                            dataType: ele.dataType,
                            formLabel: ele.formLabel,
                            formLabels: ele.formLabels ? ele.formLabels : '',
                            help: ele.help,
                            optValue: ele.optValue,
                            isRequired: ele.isRequired,
                            dataFormat: ele.dataFormat ? ele.dataFormat : '',
                        })
                    }
                });
                for (let i = 0; i < listCopyArr.length; i++) {
                    if (listCopyArr[i].dataType == 7) {
                        listCopyArr[i].child.forEach(ele => {
                            listCopyArr[i].children.push({
                                dataType: ele.dataType,
                                formLabel: ele.formLabel,
                                formLabels: ele.formLabels ? ele.formLabels : '',
                                help: ele.help,
                                optValue: ele.optValue,
                                isRequired: ele.required,
                                dataFormat: ele.dataFormat ? ele.dataFormat : '',
                            })

                        })
                    }
                }
                let saveObj = {}
                if (self.$route.query.upData == 'add') {
                    saveObj = {
                        introduce: self.fromExplainVal,
                        isDef: '0',
                        isDisabled: '0',
                        name: self.fromNameVal,
                        logo: self.iconVal,
                        templateForms: listCopyArr,
                    }
                } else if (self.$route.query.upData == 'edit') {
                    saveObj = {
                        id: JSON.parse(self.$route.query.upList).id,
                        introduce: self.fromExplainVal,
                        isDef: '0',
                        isDisabled: '0',
                        name: self.fromNameVal,
                        logo: self.iconVal,
                        templateForms: listCopyArr,
                    }
                }
                self.getapprovaleditmodelsave(JSON.stringify({
                    companyId: sessionStorage.getItem("ORGID"), //公司id
                    memberId: sessionStorage.getItem("memberId"), //成员id
                    groupId: self.categoryId, //分组id
                    templateParam: saveObj
                })).then(data => {
                    if (data.statusCode == "200") {
                        this.$message({
                            type: "success",
                            message: "已成功保存,请重新设置审批流程！"
                        });
                        this.$router.push({
                            path: "/home/examine"
                        });
                        drag.$off("save");
                    } else if (data.statusCode == "200003") {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                        this.$router.push({
                            path: "/login"
                        });
                    } else {
                        this.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    if (JSON.parse(msg.bodyText).code == "188888") {
                        this.$message({
                            type: "info",
                            message: JSON.parse(msg.bodyText).msg
                        });
                        this.$router.push({
                            path: "/login"
                        });
                    } else {
                        this.$message({
                            type: "info",
                            message: data.msg
                        });
                    }
                });
            },
            //取消
            cancelBoxClick() {
                this.boxShow = false;
            },
            ...mapActions(["getapprovaleditmodelsave", "getapprovalcategorylist"])
        }
    };
</script>

<style scoped>
    .designer {
        display: flex;
        min-height: 730px;
        z-index: 2;
    }

    .cursorOne {
        cursor: url('../../../../../static/img/cursor1.png'), pointer;
    }

    .cursorTwo {
        cursor: url('../../../../../static/img/cursor2.png'), pointer;
    }

    .cursorThree {
        cursor: url('../../../../../static/img/cursor3.png'), pointer;
    }

    .cursorFour {
        cursor: url('../../../../../static/img/cursor4.png'), pointer;
    }

    .cursorFive {
        cursor: url('../../../../../static/img/cursor5.png'), pointer;
    }

    .cursorSix {
        cursor: url('../../../../../static/img/cursor6.png'), pointer;
    }

    .cursorSeven {
        cursor: url('../../../../../static/img/cursor7.png'), pointer;
    }

    .cursorEight {
        cursor: url('../../../../../static/img/cursor8.png'), pointer;
    }

    .cursorNine {
        cursor: url('../../../../../static/img/cursor9.png'), pointer;
    }

    .cursorTen {
        cursor: url('../../../../../static/img/cursor10.png'), pointer;
    }

    .moduleTop {
        height: 59px;
        width: 1148px;
        color: #303030;
        text-align: center;
        line-height: 59px;
        margin-left: 26px;
        font-size: 14px;
        border-bottom: 1px solid #aeaeae;
    }

    #follow {
        width: 148px;
        height: 42px;
        line-height: 42px;
        color: white;
        padding-left: 15px;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1;
        position: fixed;
    }

    .followIco {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 9px;
        right: 12px;
        background-image: url('../../../../../static/img/小图标1.png');
        background-repeat: no-repeat;
    }

    .submitBut {
        width: 120px;
        height: 32px;
        border-radius: 4px;
        background: #38adff;
        cursor: pointer;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        color: white;
        letter-spacing: 3px;
        margin: 0px auto 24px;
    }


    .boxBackground {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100
    }

    .addBox {
        width: 500px;
        height: 240px;
        background: white;
        margin: 200px auto;
        border-radius: 4px;
        box-shadow: 3px 5px rgba(66, 65, 65, 0.2);
        z-index: 100;
    }

    .addBoxTop {
        width: 100%;
        height: 60px;
        text-align: center;

        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

    .addBoxTopFont {
        width: 80%;
        height: 60px;
        font-size: 20px;
        line-height: 60px;
        font-weight: bold;
        letter-spacing: 4px;
        margin-left: 10%;
    }

    .addBoxTopBut {
        width: 8%;
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        margin-left: 2%;
        transform: rotate(45deg);
        cursor: pointer;
    }

    .boxSelect {
        width: 100%;
        height: 100px;
        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

    .boxSelectFont {
        width: 230px;
        height: 100px;
        margin-right: 20px;
        line-height: 100px;
        text-align: right;
    }

    .boxSelectSelect {
        width: 50%;
        height: 100px;
        line-height: 100px;
    }

    .boxSelectSelect select {
        width: 150px;
        height: 32px;
        line-height: 32px;
        padding-left: 25px;
        color: #8f8e94;
        border-radius: 3px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background: url("/static/img/blueArrows.jpg") 92% 12px no-repeat transparent;
        font-size: 14px;
        color: #97969b;
        border: 1px solid #aeaeae;
        overflow: hidden;
    }

    select::-ms-expand {
        display: none;
    }

    .boxButton {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .boxButton>div {
        width: 60px;
        height: 30px;
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        letter-spacing: 4px;
        color: white;
        cursor: pointer;
    }

    .addBut {
        background: #49a9ee;
        margin-right: 20px;
    }

    .cancelBut {
        background: rgba(0, 0, 0, 0.2);
    }
</style>